<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>首页</title>
    <link rel="stylesheet" href="../css/reset.css">
    <link rel="stylesheet" href="../css/common.css">
    <link rel="stylesheet" href="../css/swiper-bundle.css">
    <link rel="stylesheet" href="../css/index.css">
    <script src="../js/jquery-3.6.0.js"></script>
    <script src="../js/swiper-bundle.js"></script>


</head>

<body>
    <!-- 头部 -->
    <div class="header">
        <div class="container">
            <img src=""
                alt="" width="75px" height="75px" class="one">
            <h2>熊猫优选</h2>
            <div class="center">
                <!-- <img src="images/搜索.jpg" alt=""> -->
                <input type="text" name="shou" placeholder="搜索商品，发现更多优惠">
                <button>搜索</button>
            </div>
            <div class="reg">
                <img src=""
                    alt="" width="40px" height="40px">
                <img src=""
                    alt="" width="40px" height="40px">
                <img src=""
                    alt="" width="40px" height="40px">
            </div>
        </div>
    </div>

    <!-- 导航 -->
    <div class="nav">
        <div class="container">
            <ul>
                <li><a href="#">首页</a></li>
                <li>
                    <div onclick="onPage()">9.9包邮</div>
                </li>
                <li><a href="#">超值大额卷</a></li>
                <li><a href="#">降温急救穿搭</a></li>

            </ul>
        </div>
    </div>

    <!-- //轮播区 -->
    <div class="blaner">
        <div class="container">
            <div class="left">
                <ul>
                    <li><a href="#">女装/女鞋</a></li>
                    <li><a href="#">男装/男鞋</a></li>
                    <li><a href="#">美妆/个护</a></li>
                    <li><a href="#">配饰/箱包</a></li>
                    <li><a href="#">零食王国</a></li>
                    <li><a href="#">母婴用品</a></li>
                    <li><a href="#">手机/数码</a></li>
                    <li><a href="#">内衣/袜子</a></li>
                    <li><a href="#">文娱/家居</a></li>
                </ul>
            </div>
            <!-- 中间 -->
            <div class="center">
                <div class="swiper">
                    <div class="swiper-wrapper">
                        <div class="swiper-slide"><img
                                src="https://img1.lukou.com/static/coupon/p/image_link/v0I932wGsDoUK4eG4P6PIbNkSdPokflI.jpeg"
                                alt=""></div>
                        <div class="swiper-slide"><img
                                src="https://img1.lukou.com/static/coupon/p/image_link/hysAxvvgCTiczcuVbbYq99Zlz7q0RQzY.png"
                                alt=""></div>
                        <div class="swiper-slide"><img
                                src="https://img1.lukou.com/static/coupon/p/image_link/fCIwSWAleJUCBePcmupGODXBWK3yo8bg.jpeg"
                                alt=""></div>

                    </div>
                    <!-- 如果需要分页器 -->
                    <div class="swiper-pagination"></div>

                    <!-- 如果需要导航按钮 -->
                    <div class="swiper-button-prev"></div>
                    <div class="swiper-button-next"></div>
                </div>
                <!-- //下边 -->
                <div class="down">
                    <div class="cool">
                        <!-- 动态生成 -->

                    </div>

                    <div class="coupons">
                        <!-- 动态生成 -->

                    </div>
                </div>
            </div>
            <!-- //右边 -->
            <div class="rigth">
                <a href=""><img src="images/电商项目_03.jpg" alt=""></a>
                <a href=""> <img src="images/电商项目_06.jpg" alt="" class="pic"></a>
            </div>

        </div>
    </div>
    <!-- //小编精选 -->
    <div class="select">
        <div class="container">
            <p>小编精选</p>
            <p>每日更新</p>
        </div>
    </div>

    <!-- //动态渲染列表数据 -->
    <div class="list">
        <div class="container">
            <!-- 动态生成 -->
           
        </div>
    </div>

    <!-- 加载更多 -->

    <div class="btn">
        <button>加载更多</button>
    </div>
    <!-- 回到顶部 -->

    <div class="back">

        <button>
            <span>&it;</span>顶部</button>
    </div>

    <script src="../js/index.js"></script>

    <script>

    </script>
</body>

</html>